<template>
  <div class="app-container home">
    <el-card class="update-log">
      <el-form :inline="true" :model="queryParams" size="small">
        <el-form-item label="用户注册电话">
          <el-input
            v-model="queryParams.mobile"
            placeholder="用户注册电话"
            clearable
            style="width: 240px"/>
        </el-form-item>

        <el-form-item label="用户openId">
          <el-input
            v-model="queryParams.openId"
            placeholder="请输入用户openId"
            clearable
            style="width: 240px"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="reset()">重置</el-button>
        </el-form-item>

      </el-form>

      <div slot="header" class="clearfix"><span>用户列表</span></div>

      <el-table v-loading="loading" :data="users" row-key="user.id" default-expand-all>
        <el-table-column width="120" label="用户编号" align="center" prop="user.id"/>
        <el-table-column width="280" label="用户openID" align="center" prop="user.openId"/>
        <el-table-column width="120" label="用户注册电话" align="center" prop="user.mobile"/>
        <el-table-column width="80" label="来源" align="center" prop="user.identity"/>
        <el-table-column width="180" label="创建时间" align="center" prop="user.createdTime"/>
        <el-table-column width="180" label="更新时间" align="center" prop="user.updatedTime"/>
        <el-table-column width="200" label="用户拥有的套餐" type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.comboOrders" style="width: 90%; float:right;" row-key="id">
              <el-table-column label="套餐单号" align="center" prop="id"/>
              <el-table-column label="套餐名称" align="center" prop="comboName"/>
              <el-table-column label="支付单号" align="center" prop="outTradeNo"/>
              <el-table-column label="价格" align="center" prop="buyPrice"/>
              <el-table-column label="余额" align="center" width="140">
                <template slot-scope="scope">
                  <input style="width:60px" v-model="scope.row.surpulsValue" clearable>
                  <el-button type="primary" size="small" @click="updataUserCombo(scope.row)">修改</el-button>
                </template>
              </el-table-column>
              <el-table-column label="生效时间" align="center" prop="buyTime"/>
              <el-table-column label="失效时间" align="center" prop="useEndTime"/>
              <el-table-column label="启用标识" align="center" prop="enable"/>
            </el-table>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"/>
    </el-card>
  </div>
</template>

<script>
  import {getLP, getUsers, updataComboOrder} from "@/api/weiChat";

  import Cookies from "js-cookie";

  export default {
    data() {
      return {
        // 遮罩层
        loading: true,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          openId: '',
          mobile: ''
        },
        users: []
      }
    },
    created() {
      if (Cookies.get('jfT') == undefined) {
        getLP().then(res => {
          Cookies.set('jfT', res.data)
          this.getList()
        })
      } else {
        this.getList()
      }
    },

    methods: {
      getList() {
        this.loading = true
        getUsers(this.queryParams, Cookies.get('jfT')).then((res) => {
          if (res.code == 1000) {
            this.users = res.data
          }
          this.loading = false
        })
      },

      reset() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          mobile: '',
          openId: ''
        }
        this.getList()
      },

      updataUserCombo(cu) {
        updataComboOrder({
          id: cu.id,
          surpulsValue: cu.surpulsValue
        }).then((res) => {
          if (res.code == 1000) {
            this.$modal.msgSuccess("修改成功")
            this.getList()
          }
        })
      }
    }
  };
</script>

<style scoped lang="scss">
  .home {
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

